<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人物简介</title>
</head>
<style>
    .title {
        font-size: 24px;
        line-height: 30px;
        margin: 30px 0;
        padding-left: 30px;
    }

    .characters {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        text-align: center;
        line-height: 30px;
        position: relative;
    }

    .character .front,
    .back {
        overflow: hidden;
        backface-visibility: hidden;
        transition: transform 0.5s linear;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        border-radius: 5%;
        padding: 20px 10px;
    }

    .back {
        position: absolute;
        top: 0;
    }

    .character .front {
        transform: perspective(1000px) rotateY(0deg);
    }

    .character:hover .front {
        transform: perspective(1000px) rotateY(-180deg)
    }

    .character .back {
        transform: perspective(1000px) rotateY(180deg);
    }

    .character:hover .back {
        transform: perspective(1000px) rotateY(0deg)
    }

    .back {
        background: #fff !important;
    }

    img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
</style>

<body>
    <div id="app"></div>
</body>
<script>
    function crtCharacter(img, name, nickname, describe) {
        return { img, name, nickname, describe }
    }
    function $(selector) {
        return document.querySelector(selector)
    }
    //翻页效果
    function back() {
        let currentCharacter = -1 // -1 没有选中
        let characters = {}
        function init() {
            fill()
            pushFaces()
            console.log(characters)
        }
        function fill() {
            characters['c1'] = {}
            characters['c1'].title = "流浪马戏团"
            characters['c1'].c = []
            characters['c1'].c.push(crtCharacter("./images/c066cc9c89d0dbdd4e6bdfd8e616340.jpg", "白柳", "邪神的继承人", "我在所有人中，<br>只讨厌你。<br>但我在所有怪物中，<br>只爱你。"))
            characters['c1'].c.push(crtCharacter("./images/e535d415ec6f9db9ecc31aabc12e5ce.jpg", "牧四诚", "盗贼驯养的卷尾猴", "我是为了赎罪而偷窃的，<br>就像是，<br>他为了保护而杀戮一样。"))
            characters['c1'].c.push(crtCharacter("./images/b8de005e28eaec9ff252fe616d8fcdd.jpg", "刘佳怡", "被诅咒的禁忌女巫", "她可是女巫，<br>女巫说，<br>今晚是个平安夜。"))
            characters['c1'].c.push(crtCharacter("./images/2b8f057c9bd830028be7ce76e3abc74.jpg", "木柯", "光明勇敢的刺客", "我会成为一个刺客<br>勇敢的保护你到最后一刻，<br>请你，<br>收下我的懦弱的灵魂，好吗？"))
            characters['c1'].c.push(crtCharacter("./images/df1df0e7950d8c15d3971dd8f2027f4.jpg", "唐二打", "凋谢的玫瑰猎人", "苏恙，<br>我做不到不回头。"))
            characters['c2'] = {}
            characters['c2'].title = "杀手序列"
            characters['c2'].c = []
            characters['c2'].c.push(crtCharacter("./images/renwu1.jpg", "陆驿站", "逆神的审判者", "在我还爱她的当下，我恐惧着看不到她的未来。<br>对我来说的话，爱人大概就是能让我恐惧没有她的未来的那个人吧。"))
            characters['c2'].c.push(crtCharacter("./images/renwu3.jpg", "黑桃", "陨落的旧邪神", "IIIIIIIIm fine,<br>thank you,<br>and you?"))
            characters['c3'] = {}
            characters['c3'].title = "国王皇冠"
            characters['c3'].c = []
            characters['c3'].c.push(crtCharacter("./images/renwu4.jpg", "兆木弛", "红桃皇后", "或许她想要的，<br>只是一个看着她舞，<br>而不想亲吻她的人。"))
            characters['c3'].c.push(crtCharacter("./images/renwu9.jpg", "菲比", "修女/如坠地狱的魔女", "如果真的有上帝的话，<br>那愿主保佑小女巫能上天堂。"))
            characters['c3'].c.push(crtCharacter("./images/renwu10.jpg", "刘怀", "懦弱的暗杀者", "你是世界上最好的妹妹，佳仪，<br>可是......<br>我不是世界上最好的哥哥。"))
            characters['c4'] = {}
            characters['c4'].title = "猎鹿人"
            characters['c4'].c = []
            characters['c4'].c.push(crtCharacter("./images/renwu3.jpg", "岑不明", "不明的行刑人", "我还是很讨厌你这个人，陆驿站，<br>但我不喜欢欠别人，<br>所以如果你需要我替你去死，<br>我可以顶替你。"))
            characters['c4'].c.push(crtCharacter("./images/renwu12.jpg", "丹尼尔", "小丑", "教父，<br>我会成为您最忠实的信徒。"))
            characters['c5'] = {}
            characters['c5'].title = "赌徒俱乐部"
            characters['c5'].c = []
            characters['c5'].c.push(crtCharacter("./images/renwu11.jpg", "查尔斯", "赌桌上的魔术师", "xxxxxxxx<br>xxxxxxxxxxxx"))
            characters['c6'] = {}
            characters['c6'].title = "黄金黎明"
            characters['c6'].c = []
            characters['c6'].c.push(crtCharacter("./images/renwu5.jpg", "乔治亚", "古罗伦的王储", "xxxxxxx"))
            characters['c6'].c.push(crtCharacter("./images/renwu5.jpg", "阿曼德", "飓风蝴蝶", "飓风，又起了。"))
            characters['c7'] = {}
            characters['c7'].title = "其它"
            characters['c7'].c = []
            characters['c7'].c.push(crtCharacter("./images/renwu2.jpg", "方点", "正十字审判军队长", "不要害怕与所爱之人离别，白柳，<br>因为我们终将重逢。"))
            characters['c7'].c.push(crtCharacter("./images/renwu8.jpg", "白六", "邪神", "神赐予造物爱人，朋友和亲人，<br>再将其从造物身边剥夺，<br>以此来制造痛苦，酿造灵魂。"))
            characters['c7'].c.push(crtCharacter("./images/renwu6.jpg", "杜三鹦", "幸运儿", "我不要幸运的活着，<br>让我不幸的死去！"))
            characters['c7'].c.push(crtCharacter("./images/renwu7.jpg", "谢塔（塔维尔）", "陨落的旧邪神", "我是一个没有夏天的陨落神明，<br>但我拥有一整个等待你的冬日。"))
            characters['c7'].c.push(crtCharacter("./images/renwu1.jpg", "苏恙", "", "我觉得<br>怪好的嘞"))
        }

        function pushFaces() {
            for (let i in characters) {
                let row = createRow(characters[i].title)
                for (let j of characters[i].c) {
                    row.querySelector(".characters").appendChild(createCell(j))
                }
                $("#app").appendChild(row)
            }
        }
        function createCell(character) {
            let c = document.createElement("div")
            c.className = "character"
            let front = document.createElement("div")
            front.className = "front"
            let img = document.createElement("img")
            img.src = character.img
            let name = document.createElement("div")
            name.innerHTML = character.name
            let nickname = document.createElement("div")
            nickname.innerHTML = character.nickname
            front.appendChild(img)
            front.appendChild(name)
            front.appendChild(nickname)
            c.appendChild(front)
            let back = document.createElement("div")
            back.className = "back"
            let describe = document.createElement("div")
            describe.innerHTML = character.describe
            back.appendChild(describe)
            c.appendChild(back)
            return c
        }

        function createRow(t) {
            let box = document.createElement("div")
            let title = document.createElement("div")
            title.innerHTML = t
            title.className = "title"
            let c = document.createElement("div")
            c.className = "characters"
            box.appendChild(title)
            box.appendChild(c)
            return box
        }
        return { init }
    }
    let b = new back()
    b.init()
</script>

</html>